<template>
  <div>
    <el-dialog v-model="openFlag" title="创建盘点单" width="30%" append-to-body>
      <!-- 警告信息 -->
      <el-alert type="error" style="margin-bottom: 20px;">
        创建盘点单后将会冻结盘点仓库，所有入、出库单都不能做，直到盘点完成
      </el-alert>

      <!-- baseForm 表单 -->
      <el-form ref="baseForm" :rules="baseFormRules" :model="baseFormData" label-width="80">
        <el-form-item label="盘点名称" prop="title">
          <el-input v-model="baseFormData.title" placeholder="请输入" />
        </el-form-item>
      </el-form>

      <!-- 盘点范围 -->
      <div>盘点范围</div>
      <el-form ref="rangeForm" :rules="rangeFormRules" :model="rangeFormData" label-width="80">
        <el-row>
          <el-col :span="24">
            <el-form-item label="耗材分类" prop="categoryId">
              <category-select v-model="rangeFormData.categoryId" placeholder="请选择"></category-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="耗材仓库" prop="warehouseId">
              <warehouse-select v-model="rangeFormData.warehouseId" placeholder="请选择"></warehouse-select>
            </el-form-item>
          </el-col>
          <div class="options-container" style="margin-left: 100px;">
            <el-checkbox v-model="baseFormData.pdAutoUpdate">盘盈耗材自动新增入库</el-checkbox>
            <el-checkbox v-model="baseFormData.managerChoose">未盘、盘亏耗材自动盘亏处理</el-checkbox>

          </div>
        </el-row>
      </el-form>

      <!-- 弹窗按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="close">取消</el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import api from "./api.js";
import CategorySelect from "@/components/Consume/CategorySelect.vue";
import WarehouseSelect from "@/components/Consume/WarehouseSelect.vue";
import { ElMessage } from 'element-plus';

const emit = defineEmits(['emit']);

const openFlag = ref(false);

const baseForm = ref();
const rangeForm = ref();

const baseFormData = reactive({
  name: null
});

const baseFormRules = {
  title: [
    { required: true, message: '名称不能为空', trigger: 'blur' },
    { min: 3, max: 50, message: '名称长度应在3到50个字符之间', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]+$/, message: '名称只能包含字母、数字和汉字', trigger: 'blur' }
  ]
};

const rangeFormRules = {
  categoryId: [
    { required: true, message: '请选择类别', trigger: 'blur' }
  ],
  warehouseId: [
    { required: true, message: '请选择仓库', trigger: 'blur' }
  ]
};

const rangeFormData = reactive({
  categoryId: null,
  warehouseId: null,
})

function open() {
  openFlag.value = true;
}

function close() {
  openFlag.value = false;
}

function save() {

  baseForm.value.validate(valid => {
    if (valid) {
      rangeForm.value.validate(rangeValid => {
        if (rangeValid) {

          const params = {
            baseForm: { ...baseFormData },
            rangeForm: { ...rangeFormData }
          };

          api.save(params).then(response => {
            emit("sub");
            close();
          });
        } else {
   
          ElMessage.error("请选择类别和仓库");
        }
      });
    } else {
      
      ElMessage.error("表单填写不完整，请检查");
    }
  });
}

defineExpose({
  open
});
</script>
